<template>
	<view>
		<!-- 订单状态 -->
		<view class="order-type" :style="(Number(this.countDown.day) + Number(this.countDown.hours) + Number(this.countDown.minutes)) > 0 ?'':'background: #E1E4E5;'">
			<!-- status = 0  ==>  待支付 -->
			<!-- status = 1  ==>  已付款等待发货 -->
			<!-- status = 2  ==>  已关闭（无设计稿） -->
			<!-- status = 4  ==>  无效订单（无设计稿） -->
			<!-- status = 5  ==>  已发货 -->
			<!-- status = 6  ==>  完成（无设计稿 同7） -->
			<!-- status = 7  ==>  交易成功 -->
			<block v-if="pageData.status == 0">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_beihuozhong.png" mode="widthFix"></image>
					等待付款
				</view>
				<view class="time">
					<text>剩</text>
					<text v-if="countDown.day > 0">{{countDown.day}}天</text>
					<text>{{countDown.hours}}小时{{countDown.minutes}}分 自动关闭</text>
				</view>
			</block>
			<block v-if="pageData.status == 1">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_beihuozhong.png" mode="widthFix"></image>
					卖家正在备货中···
				</view>
			</block>
			<block v-if="pageData.status == 2">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_beihuozhong.png" mode="widthFix"></image>
					无效订单
				</view>
			</block>
			<block v-if="pageData.status == 4">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_beihuozhong.png" mode="widthFix"></image>
					订单已失效
				</view>
			</block>
			<block v-if="pageData.status == 5">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_yifahuo.png" mode="widthFix"></image>
					已发货
				</view>
				<view class="time">
					<text>剩</text>
					<text v-if="countDown.day > 0">{{countDown.day}}天</text>
					<text>{{countDown.hours}}小时{{countDown.minutes}}分 自动确认</text>
				</view>
			</block>
			<block v-if="pageData.status == 6">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_jiaoyichenggong.png" mode="widthFix"></image>
					完成
				</view>
			</block>
			<block v-if="pageData.status == 7">
				<view class="type">
					<image class="ico" src="/static/img/user/icon_jiaoyichenggong.png" mode="widthFix"></image>
					交易成功
				</view>
			</block>

		</view>

		<!-- 地址信息 -->
		<view class="address-section">
			<view class="user-info">
				<text>{{pageData.receiver_name}}</text>
				<text>{{pageData.receiver_phone}}</text>
			</view>
			<view class="address-detail">
				{{pageData.receiver_province + pageData.receiver_city + pageData.receiver_region + pageData.receiver_detail_address}}
			</view>
		</view>

		<!-- 商品信息 -->
		<!-- 待支付 -->
		<template v-if="pageData.is_paid == 0">
			<view class="goods-section" v-for="(orderitem,orderindex) in pageData.orders" :key="orderindex">
				<view class="g-header">
					<!-- <image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image> -->
					<text class="name">{{orderitem.seller_name}}</text>
				</view>
				<!-- 商品列表 -->
				<view class="g-list">
					<view class="g-item" v-for="(item,index) in orderitem.items" :key="index">
						<image :src="imgsrc + item.product_pic"></image>
						<view class="right">
							<text class="title clamp">{{item.product_name}}</text>
							<text class="spec">{{item.spl}}</text>
							<view class="price-box">
								<text class="price">￥{{item.product_price}}</text>
								<text class="number">x {{item.product_quantity}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 支付完成 -->
		<template v-if="pageData.is_paid == 1">
			<view class="goods-section">
				<view class="g-header">
					<!-- <image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image> -->
					<text class="name">{{pageData.seller_name}}</text>
				</view>
				<!-- 商品列表 -->
				<view class="g-list">
					<view class="g-item" v-for="(item,index) in pageData.items" :key="index">
						<image :src="imgsrc + item.product_pic"></image>
						<view class="right">
							<text class="title clamp">{{item.product_name}}</text>
							<text class="spec">{{item.spl}}</text>
							<view class="price-box">
								<text class="price">￥{{item.product_price}}</text>
								<text class="number">x {{item.product_quantity}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>


		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品合计</text>
				<text class="cell-tip">￥{{pageData.total_amount}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥{{pageData.freight_amount || 0}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip">-￥{{pageData.coupon_amount || 0}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">福分抵扣</text>
				<text class="cell-tip">-￥{{pageData.integration_amount || 0}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">会员抵扣</text>
				<text class="cell-tip">-￥{{pageData.vip_discount_amount || 0}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip">{{pageData.id}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">提交时间</text>
				<text class="cell-tip">{{pageData.create_time}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="pageData.status!=0">
				<text class="cell-tit clamp">支付方式</text>
				<text class="cell-tip">{{pageData.is_paid==0 ? '未支付' : pageData.pay_type == 1 ? '支付宝' : '微信'}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="pageData.status!=0">
				<text class="cell-tit clamp">付款时间</text>
				<text class="cell-tip">{{pageData.create_time}}</text>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer" v-if="pageData.status != 2">
			<block v-if="pageData.status==0">
				<text class="refund" @click="cancelClick">取消订单</text>
				<text class="logistics" @click="payClick">立即付款</text>
			</block>
			<block v-if="pageData.status==1">
				<!-- <text class="refund" @click="refundClick">申请退款</text> -->
				<text class="logistics" @click="remindShipping">提醒发货</text>
			</block>
			<block v-if="pageData.status==5">
				<text class="refund" @click="logisticsClick">查看物流</text>
				<text class="logistics">确认收货</text>
			</block>
			<!-- <block v-if="pageData.status==6">
				<text class="refund" @click="evaluateClick">评价</text>
			</block> -->
			<block v-if="pageData.status==7">
				<!-- <text class="refund" @click="serviceClick">退款售后</text> -->
				<text class="logistics">评价</text>
			</block>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
	} from 'vuex'
	import Api from '@/common/api';
	export default {
		data() {
			return {
				imgsrc: Api.imgsrc,
				pageData: {},
				type: 0,
				id: '',
				preIndex: null,
				orderItemIndex: null,
				logisticsData: {
					img: [],
					addr: ''
				},
				countDown: {
					countDownTime: '',
					timer: null,
					flag: false,
					day: '0',
					hours: '00',
					minutes: '00',
				},

			}
		},
		onLoad(option) {
			this.id = option.id;
			this.type = option.type;
			this.preIndex = option.index;
			this.orderItemId = option.orderItemId;
			this.loadData();
		},
		onShow() {

		},
		filters: {
			toFixed: function(x) {
				return parseFloat(x).toFixed(2);
			}
		},
		computed: {

		},
		methods: {
			...mapMutations(['setlogistics']),

			/**
			 *@param {Number} status 主订单状态 0->待付款；1->已付款；2->已关闭；4->无效订单
			 * 						 子订单状态 0->待付款；1->已付款；2->已关闭；5->待收货；6->待评价；7->完成；8->无效订单
			 */
			async loadData() {
				let params = {
						id: this.id, //订单号
						type: this.type //0默认为主订单、1为子订单
					},
					valid_time,
					data = await Api.apiCall('post', Api.order.orderDetail, params);
				this.pageData = data;
				switch (data.status) {
					case 0:
						// 订单失效 - 倒计时
						valid_time = new Date(this.pageData.create_time.replace(/-/g, '/')).getTime() + 86400000;
						console.log(valid_time)
						this.getServerTime(valid_time);
						break;

					case 4:
						this.countdown = null
						break;

					case 5:
						// 物流信息存储
						this.logisticsData.addr = data.receiver_city;
						data.items.forEach(item => {
							this.logisticsData.img.push(item.product_pic)
						});

						// 发货确认 - 倒计时
						valid_time = new Date(this.pageData.create_time.replace(/-/g, '/')).getTime() + 604800000;
						this.getServerTime(valid_time);
						break;

				}
			},

			getServerTime(valid_time) {
				let deltaTime = 0; //得到deltaTime 之后,随时可以用 客户端时间 + deltaTime，从而得到服务器时间
				deltaTime = this.getServerDate() - (new Date()).getTime();
				let initDuration = (Number(valid_time) - ((new Date()).getTime() + deltaTime)) / 1000;
				this.countDown.flag = false;
				if (this.countDown.timer) {
					this.clearTimer();
				}
				if (initDuration <= 0) {
					this.setFlag(true);
				}
				if (!this.countDown.flag) {

					this.runCountDown(initDuration);
				}
			},

			/**
			 * 清空计时器
			 */
			clearTimer() {
				clearInterval(this.countDown.timer);
				this.countDown.timer = null;
			},

			runCountDown(initDuration) {
				// 第一次给倒计时赋值
				this.countDownFun(initDuration)

				// 每一秒更新一次倒计时
				this.countDown.timer = setInterval(() => {
					if (this.countDown.flag) { // 倒计时结束
						clearInterval(this.countDown.timer)
						return;
					}

					initDuration = initDuration - 1 > 0 ? initDuration - 1 : 0;
					this.countDownFun(initDuration)
				}, 990)
			},

			setFlag(val) {
				this.countDown.flag = val
			},

			/**
			 * 计算倒计时
			 * @param {Number} duration - 秒数时间差
			 * @returns {string} 倒计时的字符串
			 */
			countDownFun(duration) {

				if (duration <= 0) {
					this.setFlag(true) // 将flag属性设为true
					this.countDown.day = "0"
					this.countDown.hours = "00"
					this.countDown.minutes = "00"
				} else {
					this.countDown.day = Math.floor(duration / (3600 * 24))
					this.countDown.hours = this.format(Math.floor(duration / 3600))
					this.countDown.minutes = this.format(Math.floor(duration / 60) % 60)
				}
			},

			format(time) {
				return time >= 10 ? time : `0${time}`
			},



			getServerDate() {
				// let xhr = null;
				// if (window.XMLHttpRequest) {
				// 	xhr = new window.XMLHttpRequest();
				// } else { // ie  
				// 	xhr = new ActiveObject("Microsoft")
				// }

				// xhr.open("GET", "/", false) //false不可变  
				// xhr.send(null);
				// let date = xhr.getResponseHeader("Date");
				// let time = new Date(date)

				let time = new Date();

				return time.getTime();
			},

			// 立即付款
			payClick() {
				console.log(this.id)
				uni.navigateTo({
					url: `/pages/money/pay?id=` + this.id
				})
			},
			cancelClick() {
				this.operationOrder(this.id, 1, 'cancel')
				uni.navigateBack();
			},
			/**操作订单，确认，取消，删除
			 * @param {Object} item  订单
			 * @param {Object} istotal  1 代表主订单， 0 字典订单
			 * @param {Object} operation  cancel: 取消； received：收货  delete
			 */

			async operationOrder(id, istotal, operation) {
				uni.showLoading({
					title: '请稍后'
				})

				let params = {
						'is_total': istotal,
						'id': id,
						'operation': operation
					},
					method = 'PUT',
					data = await Api.apiCall(method, Api.order.operationOrder, params);
				uni.hideLoading();
				uni.$emit(this.orderItemId, {
					operation: operation,
					index: this.preIndex
				});

				// setTimeout(() => {
				// 	let {
				// 		stateTip,
				// 		stateTipColor
				// 	} = this.orderStateExp(2);
				// 	item = Object.assign(item, {
				// 		state: item.status,
				// 		stateTip,
				// 		stateTipColor
				// 	})


				// 	//取消订单后删除待付款中该项
				// 	// let list = this.navList[1].orderList;
				// 	// let index = list.findIndex(val => val.id === item.id);
				// 	// index !== -1 && list.splice(index, 1);


				// }, 600)

			},

			// 申请退款
			refundClick() {
				uni.navigateTo({
					url: "/mall/order/applyRefund"
				})
			},

			//提醒发货
			remindShipping() {
				uni.showToast({
					title: '提醒商家成功'
				})
			},

			// 查看物流
			logisticsClick() {
				this.setlogistics(this.logisticsData);
				uni.navigateTo({
					url: `/mall/order/logistics?id=${this.id}`
				})
			},

			// 退款/售后
			serviceClick() {
				uni.navigateTo({
					url: "/mall/order/service"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: $page-color-base;
		background-color: #f5f5f5;
		padding-bottom: 140upx;
	}

	.order-type {
		height: 188upx;
		background-color: #FFBC21;
		line-height: 188upx;
		font-size: 36upx;
		font-weight: 500;
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;

		.type {
			flex: 1;

			.ico {
				width: 44upx;
				height: 44upx !important;
				margin-right: 20upx;
				vertical-align: middle;
			}
		}

		.time {
			flex: 1;
			font-size: 26upx;
			font-weight: 400;
			text-align: right;
		}
	}

	.address-section {
		padding: 10upx 30upx 20upx;
		box-sizing: border-box;
		background-color: #fff;
		// border-bottom: 1px solid $border-color-base;

		.user-info {
			font-size: 36upx;
			font-weight: 500;
			line-height: 70upx;

			text {
				margin-right: 40upx;
			}
		}

		.address-detail {
			font-size: 26upx;
			font-weight: 400;
			color: #ABADAD;
			line-height: 40upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		// padding-bottom: 1px;
		// border-bottom: 1px solid $border-color-base;

		.g-header {
			display: flex;
			align-items: center;
			height: 88upx;
			position: relative;
			// margin: 30upx 0;
			padding: 0 30upx;
			background: #fff;
			box-shadow: 0px 1upx 0px 0px rgba(239, 242, 244, 1);
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			// margin-left: 24upx;
		}

		.g-list {
			padding: 10upx 0;
			background: #fff;

			.g-item {
				width: 100%;
				// height: 240upx;
				display: flex;
				padding: 10upx 30upx;

				image {
					flex-shrink: 0;
					display: block;
					width: 209upx;
					height: 209upx;
					border-radius: 4upx;
				}

				.right {
					flex: 1;
					padding-left: 24upx;
					overflow: hidden;
				}

				.title {
					font-size: 30upx;
					color: $font-color-dark;
				}

				.spec {
					font-size: 26upx;
					color: $font-color-light;
				}

				.price-box {
					display: flex;
					align-items: center;
					font-size: 32upx;
					color: $font-color-dark;
					padding-top: 72upx;

					// margin-bottom: 150upx;
					.price {
						margin-bottom: 4upx;
					}

					.number {
						font-size: 26upx;
						color: $font-color-base;
						margin-left: 20upx;
					}
				}

				.step-box {
					position: relative;
				}
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 30upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.title {
			color: #232323;
			font-size: 28upx;
			font-weight: 600;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}

		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		padding: 20upx 30upx;
		left: 0;
		bottom: 0;
		z-index: 995;
		width: 100%;
		height: 118upx;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		text-align: right;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		text {
			display: inline-block;
			width: 200upx;
			height: 78upx;
			text-align: center;
			line-height: 78upx;
			margin-left: 30upx;
			font-size: 26upx;
			border-radius: 39upx;
		}

		.refund {
			color: #757677;
			background-color: #fff;
			border: 1upx solid #757677;
			box-sizing: border-box;
		}

		.logistics {
			color: #232323;
			background-color: #FFBC21;
		}
	}
</style>
